<template>
  <div class="box">
    <div class="search" ref="search">
      <van-search v-model="value" show-action placeholder="请输入搜索关键词">
        <template #action>
          <div @click="toBack()">取消</div>
        </template>
      </van-search>
    </div>
    <div class="content-box" :style="{ height }">
      <ul>
        <!-- 这里是直接li被getSearchCinemas的数据驱动，getSearchCinemas一直变化，因此li变化，所以不用 -->
        <li
          class="cinema"
          v-for="(cinema, index) in getSearchCinemas"
          :key="index"
        >
          <span class="name">{{ cinema.name }}</span>
          <div class="price">
            ￥<span class="price-number">{{ cinema.lowPrice / 100 }}</span
            >起
          </div>
          <div class="address">{{ cinema.address }}</div>
          <span class="cross-line" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import isNavShow from '@/util/mixinShowNav'
import betterScroll from 'better-scroll'
import { Search } from 'vant'
import Vue from 'vue'

Vue.use(Search)

export default {
  mixins: [isNavShow],
  data () {
    return {
      value: '',
      height: 0,
      scroll: null
    }
  },
  methods: {
    toBack () {
      this.$router.back()
    }
  },
  computed: {
    getSearchCinemas () {
      return this.$store.state.cinemas.filter(
        (cinema) =>
          cinema.name.toUpperCase().includes(this.value.toUpperCase()) &&
          this.value
      )
    }
  },
  mounted () {
    this.height =
      document.documentElement.clientHeight -
      this.$refs.search.offsetHeight + 'px'

    if (!this.$store.state.cinemas.length || this.$store.state.isCityChanged) { this.$store.dispatch('getCinemas') }
  },
  updated () {
    // 再搜索会实时改变元素的构成会更新节点,那么会触发updated,此时已经上树,再判断是否已经存在scroll,如果存在就摧毁了再创建
    // 多个滚动条同时存在（不摧毁）会出现bug
    if (this.scroll) this.scroll.destroy()
    this.scroll = new betterScroll('.content-box', {
      scrollbar: {
        fade: true
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  position: relative;
  overflow: hidden;
  .cinema {
    position: relative;
    padding: 0.9375rem;
    font-size: 0.8125rem;
  }
  .name {
    font-size: 0.9375rem;
  }
  .price {
    display: inline-block;
    position: absolute;
    right: 6%;
    color: rgb(255, 94, 0);
    .price-number {
      font-size: 1rem;
    }
  }
  .address {
    color: rgb(124, 124, 124);
    margin-top: 0.3125rem;
    width: 16rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .cross-line {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 87%;
    border-bottom: 0.0031rem solid rgba(189, 189, 189, 0.767);
  }
}
</style>
